<template>
  <div>
    <div class="control flex" v-show="!connectStatus">
      <div class="left-navbar">
        <el-menu
          default-active="1-1"
          class="el-menu-vertical-demo"
          background-color="#2C2D3A"
          text-color="#fff"
          active-text-color="#288EFF"
          @select="handleSelect"
        >
          <el-submenu index="1">
            <template slot="title">
              <span>Machines</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">TTank</el-menu-item>
              <el-menu-item index="1-2">Car2</el-menu-item>
              <el-menu-item index="1-3">Car3</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <div class="content flex middle">
        <div class="introduce">
          <div class="section">
            <h1>TTank Information</h1>
            <ul>
              <li>Name: {{ carName }}</li>
            </ul>
          </div>
          <div class="section">
            <h1>SLAMTEC RPLIDAR A3:</h1>
            <ul>
              <li>Ranging radius:20m</li>
              <li>Scanning angle:360 Degree</li>
              <li>Ranging resolution:mm</li>
              <li>Measuring frequency:2000~8000 Hz</li>
              <li>Scanning frequency:5~15 Hz</li>
            </ul>
          </div>
          <div class="section">
            <h1>Livox mid-70:</h1>
            <ul>
              <li>Distance measuring range:200m</li>
              <li>Field of view:70 Degree</li>
              <li>Distance accuracy:2cm</li>
              <li>Data output:High-density 3D point cloud</li>
              <li>Operating Voltage:12V</li>
            </ul>
          </div>
          <div class="section">
            <h1>Status: not connected</h1>
            <el-button
              :type="btnType"
              @click="connect"
              style="width: 200px;margin-top:20px;"
            >Connect</el-button>
          </div>
        </div>
        <img src="@/assets/car.png" style="width: 55%;" />
      </div>
    </div>
    <control-video v-show="connectStatus"></control-video>
  </div>
</template>
<script>
import ControlVideo from '@/components/ControlVideo'
export default {
  components: {
    ControlVideo
  },
  data() {
    return {
      data: [
        {
          label: 'Machines',
          children: [
            {
              label: 'Car1'
            },
            {
              label: 'Car2'
            },
            {
              label: 'Car3'
            }
          ]
        }
      ],
      carName: 'TTank',
      btnType: 'primary',
      connectStatus: false
    }
  },
  methods: {
    handleSelect(key) {
      this.carName = 'Car' + key.slice(-1)
    },
    connect() {
      const loading = this.$loading({
        lock: true,
        text: 'Connecting',
        background: 'rgba(0, 0, 0, 0.7)',
        target: document.querySelector('.content')
      })
      setTimeout(() => {
        this.btnType = 'info'
        loading.close()
        this.connectStatus = true
      }, 2000)
    }
  }
}
</script>
<style lang="scss" scoped>
.control {
  .left-navbar {
    .el-menu {
      width: 200px;
      height: calc(100vh - 94px);
      border: none;
    }
  }
  .content {
    flex: 1;
    padding: 0 100px;
    height: calc(100vh - 94px);
    background: rgb(26, 27, 35);
    color: rgb(197, 198, 211);
    .introduce {
      // padding: 0 40px;
      flex: 1;
      .section {
        margin: 15px 0;
        line-height: 30px;
        h1 {
          font-size: 20px;
        }
        ul {
          li {
            font-size: 14px;
            margin: 5px 0;
            white-space: nowrap;
          }
        }
      }
    }
    > img {
      flex: 2;
    }
  }
}
</style>
